<template>
  <div class="more">
  	<!-- 更多 -->
    <div class="nav">
      <div class="flex-nav">
        <div class="nav-item" v-for="(item, index) in columns" @click="router({path: 'dietInfo', query: {column_id: item.id}})">
          <img :src="item.img">
          <p>{{item.title}}</p>
        </div>
        <div class="nav-item" @click="router({path: '/payCourse'})">
          <img src="@/assets/yunbangkechen11.png">
          <span class="soid">付费</span>
          <p>付费点播</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { get_column, baseUrl } from '@/api/api'
export default {
  components: {
  },
  data () {
    return {
      columns: [],
      baseUrl,
    }
  },
  created () {
    this.get_columns()
  },
  methods: {    
    router (path) {
      this.$router.push(path)
    },    
    // 获取分类栏目
    get_columns () {
      get_column().then((res) => {
        this.columns = res.data.info
      }).catch((err) => {
        console.dir(err)
      })
    },
  }
}
</script>
<style lang="stylus" scoped>
  .more
    background-color #fff
    min-width 100vw
    min-height 100vh
    .nav
      background-color #fff
      padding-top 1.5rem
      .flex-nav
        overflow hidden
        width 100%;
        .nav-item
          text-align center
          color #666
          font-size 1.2rem
          margin-bottom 1.5rem        
          position relative 
          float left
          width 25%
          .soid
            width 2.7rem
            height 1.6rem
            background-color #9F7FFF
            border-radius .4rem
            line-height 1.6rem
            color #fff
            font-size 1rem
            text-align center
            position absolute
            right 1.2rem
            top .6rem
          img
            width auto
            height 5.5rem
            display inline-block
            margin-bottom .3rem
</style>